<!-- 供应商对账看板 -->

<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {onMounted, ref} from "vue";
import screenApi from "../../router/screen.js";


const demandObj = ref({
  legend: {
    top: '5%',
    left: 'center',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 3, 33, 40, 32],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const stateObj = ref({
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return params.data;
    }
  },
  legend: {
    top: '5%',
    left: 'center',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        formatter: function (params) {
          return params.data;
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1, name: '已处理订单' },
        { value: 1, name: '已转订单' },
        { value: 9, name: '已参与投标' }
      ]
    }
  ]
});

const labelOption = {
  show: true,
  fontSize: 16,
  position: "top",
  rich: {
    name: {}
  }
};

const progress = ref({
  legend: {
    textStyle: {
      color: 'white'
    },
    data: ['需求计划', '采购订单', '到货']
  },
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['供应商管理解决方案', '进存销解决方案', 'finebi', '简道云'],
    axisLabel: {
      formatter: function(value) {
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '需求计划',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [80, 30, 70, 20, 55]
    },
    {
      name: '采购订单',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [30, 30, 67, 3, 35]
    },
    {
      name: '到货',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [0, 3, 3, 3, 0]
    },
  ]
});

//定义map对象
const dataTotal = ref([]);
function queryPurchaseMap() {
  screenApi.queryPurchaseMap().then(res=>{
    dataTotal.value = res.data;
    demandObj.value.series[0].data = res.dataValue;
    demandObj.value.xAxis.data = res.dataName;

    progress.value.series[0].data = res.progressValue0;
    progress.value.series[1].data = res.progressValue1;
    progress.value.series[2].data = res.progressValue2;
    progress.value.xAxis.data = res.progressName;
  });
}

function getDemandPlanStatusList() {
  screenApi.getDemandPlanStatusList().then(res=>{
    stateObj.value.series[0].data = res.stateMap;
  });
}

onMounted(async () => {
  //数据
  queryPurchaseMap('');
  getDemandPlanStatusList();
});

</script>

<template>
  <div class="head">
    <h1>采购需求分析</h1>
  </div>

  <div class="board-row">

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <div style="text-align: center">
              <div>{{dataTotal.demandPlanName }}</div>
              <div style="color: yellow">{{dataTotal.demandPlanQuantity }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <div style="text-align: center">
              <div>
                {{dataTotal.purchasePlanName }}
              </div>
              <div style="color: yellow">{{dataTotal.purchasePlanQuantity }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <div style="text-align: center">
              <div>
                {{dataTotal.purchaseOrderName }}
              </div>
              <div style="color: yellow">{{dataTotal.purchaseOrderQuantity }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <div style="text-align: center">
              <div>
                {{dataTotal.storeName }}
              </div>
              <div style="color: yellow">{{dataTotal.storeQuantity }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
  </div>

  <div class="board-row">
    <common-box>
      <div class="chart-header">
        需求计划量
      </div>
      <div style="height: 15em;width: 100%;">
        <v-chart :option="demandObj"></v-chart>
      </div>
    </common-box>
    <common-box>
      <div class="chart-header">
        需求计划详情状态
      </div>
      <div style="height: 15em;width: 100%;">
        <v-chart :option="stateObj"></v-chart>
      </div>
    </common-box>
  </div>

  <div class="board-row">
    <common-box>
      <div class="chart-header">
        不同商品的采购需求
      </div>
      <div style="height: 15em;width: 100%;">
        <v-chart :option="progress"></v-chart>
      </div>
    </common-box>
  </div>
</template>

<style scoped>
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}

.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 10em;
  height: 10em;
  justify-content: center;
  align-items: center;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evenRow {
  background: #0C385E !important;
}
.oddRow{
  background:#062340 !important;
}

.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}
.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>